<template>
<div class="teamLayout">
  <q-form class="toolbar" @submit.prevent="listUsers">
    <!-- 工具栏上层 -->
    <div class="form-inline top">
      <q-select
        class="margin-r-20"
        outlined dense emit-value map-options options-dense
        :options="workshopList"
        :loading="workshopLoading"
        v-model="workshop"
      >
        <template v-slot:before>
          <span class="form-name">车间:</span>
        </template>
      </q-select>
      <div class="form-item">
        <span class="form-name" style="padding-right: 6px">年月:</span>
        <date-picker v-model="date" type="month" :clearable="false" :editable="false"/>
      </div>
      <q-space />
      <q-btn @click="getTeamScheduling" class="btn" unelevated color="primary" label="查询" />
    </div>
  </q-form>
  <div class="factory scroll scrollbar">
    <calendar ref="calendar" :cur-date="curDate" :shifts-model-id="shiftsModelId" class="full-height calendar-box"
              @edit="editScheduling" :shifts="shifts" :info="teamDetailList" v-if="dateType !== undefined"/>
  </div>
</div>
</template>

<script>
import Calendar from 'src/components/calendar'
import { getWorkshops } from 'src/boot/common/dict'
import { getTeam, editTeamscheduling } from 'src/boot/factory/factory-calendar'
import { mapActions, mapGetters } from 'vuex'
import moment from 'moment'
export default {
  name: 'teamLayout',
  data () {
    return {
      plant: null, // 选中的厂区
      workshop: null, // 选中的车间
      workshopList: [], // 车间列表
      workshopLoading: false, // 车间列表
      date: new Date(), // 年月
      curDate: this.date,
      teamDetailList: [], // 班组时间
      shifts: [], // 班组列表
      shiftsModelId: null
    }
  },
  computed: {
    ...mapGetters([
      'dateType',
      'teamList'
    ])
  },
  created () {
    this.getInfo()
  },
  methods: {
    getInfo () {
      // 获取公休日类型
      // if (this.dateType.length === 0) {
      //   this.getDateTypeAct()
      // }
      this.getDateTypeAct()
      // 获取班组列表
      // if (this.teamList.length === 0) {
      //   this.getTeamList()
      // }
      this.getTeamList()
      // 首次获取车间列表
      this.workshopLoading = true
      getWorkshops(this.plant).then(res => {
        this.workshopLoading = false
        this.workshopList = res.data
        this.workshop = this.workshopList.length > 0 ? this.workshopList[0].value : null
        console.log(this.dateType)
        this.getTeamScheduling()
      })
    },
    // 获取车间列表
    getWorkshopList () {
      this.workshopLoading = true
      getWorkshops().then(res => {
        this.workshopLoading = false
        this.workshopList = res.data
        this.workshop = this.workshopList.length > 0 ? this.workshopList[0].value : null
      })
    },
    // 获取排版信息
    getTeamScheduling () {
      const params = {
        workshopId: this.workshop,
        month: moment(this.date).format('YYYY-MM-DD')
      }
      this.$refs.calendar.clearActDay()
      getTeam(params).then(res => {
        this.teamDetailList = res.data.info.months
        this.shifts = res.data.shiftsTemplate
        this.shiftsModelId = res.data.shiftsModelId
        this.curDate = this.date
      })
    },
    // 更换时间
    changeDate (date) {
      this.date = date
    },
    // 编辑排班
    editScheduling (param) {
      const params = param.map(item => {
        return {
          ...item,
          workshopId: this.workshop
        }
      })
      console.log(params)
      if (params.length === 0) {
        this.$message.warning('请先添加班制')
        return
      }
      editTeamscheduling(params).then(() => {
        this.getTeamScheduling()
        this.$message.success('修改成功')
      }).finally(() => {
        this.$refs.calendar.clearActDay()
      })
    },
    ...mapActions([
      'getDateTypeAct',
      'getTeamList'
    ])
  },
  components: {
    Calendar
  }
}
</script>

<style scoped lang="stylus">
  .calendar-box{
    min-width 1000px
    min-height 650px
  }
  .form-inline{
    width 100%
    overflow hidden
    padding 0 0 20px
  }
  .select{
    margin-right 30px
  }
  .factory{
    height calc(100% - 52px)
  }
  @media screen and (max-width: 1200px) {
    .form-inline {
      padding 0 0 20px
    }
  }
</style>
